import { IRootReducerState } from '@/store/root-reducer';
import { parentToTree } from '@/utils/converter';
import { Input, Tree } from '@douyinfe/semi-ui';
import { useEffect, useMemo } from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import * as deptAction from '@/redux/department/department-actions';
import { useDispatch } from 'react-redux';
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';

const UserSiderTree = ({
  onSelectItem,
}: {
  onSelectItem?: (
    selectedKeys: string,
    selected: boolean,
    selectedNode: TreeNodeData
  ) => void;
}) => {
  const dispatch = useDispatch<any>();
  const { department } = useSelector<IRootReducerState, any>(
    (state) => ({ department: state.department }),
    shallowEqual
  );
  const { entities } = department;
  const treeitems = useMemo(
    () =>
      parentToTree(
        entities,
        Math.min(...entities.map((e: any) => e.parentId)),
        'name'
      ),
    [entities]
  );

  console.log('用户tree', entities, treeitems);

  useEffect(() => {
    dispatch(
      deptAction.fetchItems({
        sorter: {},
        filter: {},
        pageNum: 1,
        pageSize: 10000,
      })
    );
  }, []);

  return (
    <Tree
      filterTreeNode
      expandAll
      // searchRender={({ prefix, ...restProps }) => {
      //   console.log(prefix, restProps);
      //   return <Input prefix='Search' {...restProps} />;
      // }}
      onSelect={onSelectItem}
      treeData={treeitems}
    />
  );
};

export default UserSiderTree;
